import React from 'react';
import { Modal } from 'antd';
import { FormPanel, type FormPanelObject, RuleType, FormPanelBtnAlign, FormPanelBtnDisplay } from 'lfun-bg-comp';

const Groups: React.FC<{ show: boolean; onCancel: any; onOk: any }> = ({ show, onCancel, onOk }) => {
  const [form, setForm] = React.useState<FormPanelObject>();
  return (
    <Modal
      title="正式开办"
      open={show}
      footer={null}
      onCancel={() => {
        //form.resetFields();
        onCancel();
      }}
    >
      <FormPanel
        template={[
          {
            titel: '正式开办前需要添加管理员姓名',
            span: 24,
            labelCol: { span: 8 },
            wrapperCol: { span: 16 },
            inputs: [
              {
                label: '管理员姓名',
                name: 'admin',
                key: 'admin',
                required: true,
                textRange: [0, 30],
              },
              {
                label: '管理员手机号',
                name: 'admin_phone',
                key: 'admin_phone',
                ruleType: RuleType.cnPhone,
                required: true,
              },
            ],
          },
        ]}
        restBtnText="取消"
        submitBtnText="确认"
        footer={null}
        btnsAlign={FormPanelBtnAlign.center}
        buttonsDisplay={FormPanelBtnDisplay.block}
        onLoad={(form: FormPanelObject) => {
          setForm(form);
        }}
        onFinish={async (form: FormPanelObject) => {
          if (await onOk(form.getFieldsValue())) {
            form.resetFields();
            onCancel();
          }
        }}
        onReset={(form: FormPanelObject) => {
          //form.resetFields();
          onCancel();
        }}
      />
    </Modal>
  );
};

export default Groups;
